// 列表区可以显示的所有组件
// key对应的组件映射关系
import {
  createColorProp,
  createEditorColorProps,
  createEditorInputProps,
  createEditorSelectProps,
  createEditorTableProps,
  createTextProp,
} from "@/components/editor-config.props";
import { ElButton, ElCheckbox, ElInput, ElRadio, ElSwitch, ElTableColumn } from "element-plus";

function createEditorConfig() {
  const componentList = []; // 存储所有的组件
  const componentMap = {}; // 用key映射所有的组件，可以根据key去获取到对应的组件并渲染

  return {
    componentList,
    componentMap,
    register: (component) => {
      componentList.push(component); // 存储
      componentMap[component.key] = component; // key-value
    },
  };
}

export const registerConfig = createEditorConfig();

// 注册所有组件
registerConfig.register({
  label: "文本",
  preview: () => "预览文本", // 预览
  render: ({ props }) => (
    <span style={{ color: props?.color, fontSize: props?.size }}>{props?.text || "默认文本"}</span>
  ),
  props: {
    text: createEditorInputProps("显示文本"),
    color: createEditorColorProps("字体颜色"),
    size: createEditorSelectProps("字体大小", [
      { label: "14px", val: "14px" },
      { label: "18px", val: "18px" },
      { label: "24px", val: "24px" },
    ]),
  },
  key: "text",
});

registerConfig.register({
  label: "按钮",
  preview: () => <ElButton>预览按钮</ElButton>,
  render: ({ props, size }) => (
    <ElButton
      type={props.type}
      size={props.size}
      style={{
        width: size?.width ? `${size.width}px` : undefined,
        height: size?.height ? `${size.height}px` : undefined,
      }}
    >
      {props?.text || "默认按钮"}
    </ElButton>
  ),
  resize: { width: true, height: true },
  props: {
    text: createEditorInputProps("显示文本"),
    type: createEditorSelectProps("按钮类型", [
      { label: "基础", val: "primary" },
      { label: "成功", val: "success" },
      { label: "警告", val: "warning" },
      { label: "危险", val: "danger" },
      { label: "提示", val: "info" },
    ]),
    size: createEditorSelectProps("按钮大小", [
      { label: "默认", val: "" },
      { label: "中等", val: "medium" },
      { label: "小", val: "small" },
    ]),
  },
  key: "button",
});

registerConfig.register({
  label: "输入框",
  preview: () => <ElInput modelValue={""} />,
  render: ({ model, size, custom }) => {
    return <ElInput {...custom} {...model.default} style={{ width: size.width ? `${size.width}px` : undefined }} />;
  },
  resize: { width: true },
  model: {
    default: "绑定字段",
  },
  props: {
    size: createEditorSelectProps("输入框大小", [
      { label: "默认", val: "" },
      { label: "中等", val: "medium" },
      { label: "小", val: "small" },
    ]),
  },
  key: "input",
});

// 开关按钮
registerConfig.register({
  label: "开关按钮",
  render: ({ props, model }) => (
    <ElSwitch
      {...model.default}
      activeText={props.activeText}
      inactiveText={props.inactiveText}
      activeColor={props.activeColor}
      inactiveColor={props.inactiveColor}
    />
  ),
  preview: () => (
    <div style="text-align:center">
      <ElSwitch />
    </div>
  ),
  model: {
    default: "绑定字段",
  },
  props: {
    activeText: createTextProp({ label: "开启时文字描述" }),
    inactiveText: createTextProp({ label: "关闭时文字描述" }),
    activeColor: createColorProp({ label: "开启颜色" }),
    inactiveColor: createColorProp({ label: "关闭颜色" }),
  },
  key: "switch",
});

registerConfig.register({
  label: "单选框",
  render: () => <ElRadio>单选</ElRadio>,
  preview: () => (
    <div style="text-align:center">
      <ElRadio>单选</ElRadio>
    </div>
  ),
  key: "radio",
});

registerConfig.register({
  label: "复选框",
  render: () => <ElCheckbox>复选框</ElCheckbox>,
  preview: () => (
    <div style="text-align:center">
      <ElCheckbox>复选框</ElCheckbox>
    </div>
  ),
  key: "checkbox",
});

registerConfig.register({
  label: "下拉框",
  preview: () => <ElSelect style="width: 200px;"></ElSelect>,
  render: ({ props, model, custom, width, height }) => (
    <ElSelect
      style={{
        width: `${width}px`,
        height: `${height}px`,
      }}
      key={Math.random()}
      {...custom}
      {...model.default}
    >
      {(props.options || []).map((opt, index) => (
        <ElOption label={opt.label} value={opt.value} key={index}></ElOption>
      ))}
    </ElSelect>
  ),
  props: {
    options: createEditorTableProps("下拉选项", {
      options: [
        { label: "显示值", field: "label" },
        { label: "绑定值", field: "value" },
        { label: "备注", field: "remark" },
      ],
      showKey: "label",
    }),
  },
  model: {
    default: "绑定字段",
  },
  key: "select",
});

// 注册表格组件
registerConfig.register({
  label: "表格",
  render: ({ props, model, custom, globalActions, localActions }) => {
    return (
      <div>
        <ElButton {...custom.clickFn}>{globalActions[0].attrName || "新增"}</ElButton>
        <ElTable key={Math.random()} data={props.data}>
          {(props.options || {}).map((opt, index) => (
            <ElTableColumn label={opt.label} prop={opt.value} key={index}>
              {{
                default: ({ row }) => {
                  return <div>{typeof row[opt.value] === "object" ? row[opt.value]?.name : row[opt.value]}</div>;
                },
              }}
            </ElTableColumn>
          ))}
          <ElTableColumn label="操作栏">
            {{
              default: ({ $index, row }) => (
                <ElButton type="danger" onClick={() => custom.deleteFn(row.id)}>
                  {localActions[0].attrName}
                </ElButton>
              ),
            }}
          </ElTableColumn>
        </ElTable>
      </div>
    );
  },
  props: {
    options: createEditorTableProps("下拉选项", {
      options: [
        { label: "显示值", field: "label" },
        { label: "绑定值", field: "value" },
      ],
    }),
  },
  preview: () => {
    <div style="text-align: center">
      <ElTable></ElTable>
    </div>;
  },
  key: "table",
});
